<template>
  <div>
    <h3>姓名：{{name}}</h3>
    <h3>年龄：{{age}}</h3>
    <h3>性别：{{sex}}</h3>
  </div>
  <button @click="changeName">修改名字</button>
  <div>
    <button @click="reSet">重置store</button>
  </div>
  <div>
    <button @click="pathStore">批量修改</button>
  </div>
  <!-- 直接使用即可是响应式 -->
  {{store.getAddAge}}
  {{store.ifZhangsan}}
  {{store.getNameAge}}
  {{store.getAge(1000)}}
  <p>
    <button @click="saveName">太极出马</button>
  </p>
</template>

<script setup lang="ts">
import { useUsersStore } from './store/user'
import { storeToRefs } from 'pinia';
const store = useUsersStore()
// const name = ref(store.name)
// const age = ref<number>(store.age)
// const sex = ref<string>(store.sex)
// 可以直接使用解构的方法一次获取多个值
const { sex, name, age } = storeToRefs(store)
// console.log(store);
const changeName = () => {
  store.name = "李四"
}

const reSet = () => {
  // 重置为初始值
  store.$reset()
}

const pathStore = () => {
  // 批量修改数据，可以不用写全部属性
  store.$patch({
    // name: "王五",
    age: 22,
    sex: "女"
  })
}

const saveName = () => {
  store.saveName("张三丰")
}
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
